<template>
  <div class="dashboard-container">
    <h1>mac:{{ mac }}</h1>
    <h1>address:{{ address }}</h1>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  data() {
    return {
      mac: "",
      address: "",
    };
  },

  async created() {
    // this.getMAC();
    if (!this.isBrowser()) {
      console.warn("在 electron 环境中运行");
      const macInfo = window.electronAPI.getMAC();
      this.mac = macInfo.macAddress;
      this.address = macInfo.ipAddress;
    } else {
      console.warn("在 浏览器 环境中运行");
    }
  },
  methods: {
    getMAC() {
      // 判断是否在Electron中运行
      if (this.isElectron()) {
        const networkInterfaces = require("os").networkInterfaces();
        for (const iface of Object.values(networkInterfaces)) {
          for (const details of iface) {
            if (
              details.family === "IPv4" &&
              details.mac !== "00:00:00:00:00:00" &&
              details.address !== "127.0.0.1"
            ) {
              this.mac = details.mac;
              this.address = details.address;
            }
          }
        }
      } else {
        console.warn("不在 Electron 中运行，跳过获取 MAC 地址");
      }
    },
    isElectron() {
      // 通过判断process.versions.electron来检查是否在Electron环境中运行
      return !!(
        window &&
        window.process &&
        window.process.versions &&
        window.process.versions.electron
      );
    },
    isBrowser() {
      return typeof window.electronAPI === "undefined";
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
